In today's lecture we're going to have a look at a bit of design.
So we'll be making our stats display to display our speed and our level.
And also the main shop as well in this lecture.
So let's start off with designing the stats.
I think that's probably the easier one to do.
So we're going to add a two separate screen wise by the way.
So we're going to add one in here for the stats display.
So this will be called um Stats Display Guy.
Now feel free to change and adjust this as much as you like.
The only thing I would say and recommend to you is if you want to make it as easy, easy for yourself
as possible, lay everything out in the correct format for it.
So so you'd be okay changing like size and stuff like that.
But if you change what objects are inside of each other when you are coding it, you will have to bear
that in mind.
When you're writing out the code.
Just keep that in mind.
If you are wanting to do something completely different to this.
Okay?
Right.
So um, in here I'm going to add, um, a well, we're going to have a local script in here eventually,
um, called Stats Display, which will do all this stuff.
But we're not going to touch on that just yet.
Let me get rid of the print.
Hello, world.
Okay.
So we're going to put in here a frame.
Call this frame the display frame.
And this is basically where it's all.
Going to be contained inside.
Um now the vantage of doing this and putting our two objects to be two, one for speed, one for the
level.
So the vantage to put it in, putting it inside here is just, it's just a bit it's easier to design,
um, because instead of giving it weird positions and stuff, you can just say, well, this is going
to be about 0.45 size and be about 0.45 size.
It's more easy to, um, create basically and a bit more organized as well if you had other objects
and stuff going on.
Um, so the display frame I'm going to put here into the middle.
So 0.5 comma zero and 0.5000 for all of this, make sure the size here is in the scale not offset.
So about 0.3.
Let's just try some things out 0.3 I think looks good 0.1 um, perhaps a bit too um, we can try it
out.
I mean, the advantage of doing it this way as well is if you don't like the size that is taking up
overall, you can very easily change it as well.
So inside here we can add in two further frames.
One of these is going to be called the level frame, which contain everything the player level and the
other one owing to the player's speed.
To select both of these and position these a bit better.
So the size is going to be about 0.5.
Sorry 0.5 comma zero comma one comma zero.
Like that there.
Um, inside I want the level frame to be on the other side.
So the position here about 0.5 like that there.
Okay.
Um, inside the speed frame.
We're going to add in two things.
Add in a frame and our image.
Okay.
So let's get this to start off with and just set it back to be one.
Um, for all these objects because these are just like containers almost that we're doing this for.
Um, so we're gonna have our image, um.
Yeah.
So our we're going to have an we're going to have an image first for displays and then our frame over
on the other side of it.
So the well let's take first take both of these and just sort out the sizing a bit of it.
Okay, the image is going to be just or just here, and then the frame is going to kind of come out
of it like that there.
Um, so let's see the, um, anchor point 0.5 along the Y.
So we're going to be in the middle if we then decrease the size a bit.
Okay.
Um.
Mm.
Okay.
Um, maybe if we image itself, then is not.
We don't do that and we just set it to be.
It's just going to be a bit of moving around and stuff like that really.
Um, so it's not position scale of one.
Um.
The size.
Of one about 35K.
I'm going to have a corner on here now.
Corner is something that we did look at.
And I think these make a big difference really.
Um, to design think about ten.
You can make all these changes and stuff.
Then the frame here is going to go, um, this is two, three, five.
So position this to be about 0.3.
Perhaps make this a bit smaller.
So along the Y.
Going to service.
Yeah, feel free to change orbits.
It's completely up to you if you are following along or if you're kind of doing your own thing, that's
that's fine.
Um.
Kind of like that there.
And then this kind of comes out until whether it's three five, it's going to be six five.
Kind of like this.
Really?
Um.
Waste have another corner in its.
That's kind of what I'm looking at here.
Um, the frame or the image here is going to be the background of, like, a bluish color.
So.
A light blue.
That kind of color.
Um.
A little bit darker, perhaps.
And.
Okay, let's keep it as that.
And then we, um, we take this color and just darken it a bit for the frame here.
So.
Talking it down.
Something like this.
Um.
Now, I want this here to display a little image.
Like a little running image.
Really?
Um, so I'm going to add an image label and put it into here.
Now, one of the things of design is you can we've added in a frame here.
Just add an image label inside of it.
So you might be thinking, well why don't we just add an image label inside of it.
Well if you add your if you add it as a frame, then add your text or your image label.
Um, it just, it allows a bit more control over sizing of it.
So I can control whether this image takes up the entire frame or just a smaller portion, and often
it takes up a smaller portion of it.
It looks a little bit better.
So this is going to be positioned in the center.
And then setting the size be one, one, one.
I'm going to set it to be about 0.8 comma zero.
Like this.
It doesn't take up the entire frame.
And I'm going to find just a running image.
Something to use.
Um.
I did find one when I was.
Oh, there we go.
Um.
This one looks good, or whichever one.
Really.
Um.
Let's get busy and just see what this one looks like.
And put it into image label here.
Set the background one.
Nice.
Okay.
And I'm going to just make this slightly larger.
Um.
What we think.
Um, yeah, it's a bit smaller.
Think so?
If we set this to be.
Yeah, I think that looks good.
Um, I don't know.
I think maybe because it's a bit grey, I think including one that's, um.
Like this one make it a bit more obvious.
This is all personal preference here.
Um.
There we go.
Just so it's a bit more clear, I think the image itself.
Um, and see over here, cause it's quite large.
If it's taking up the entire thing, a change be about 0.9 and just gives it a bit more, bit more room.
Really?
Um, 1.8 might even look better.
Yeah.
Okay, cool.
Um, I think with these frames here, the speed frame is listed here.
Well, a bit more room.
Um, to go over on this frame.
So the sizing.
Now seven.
Does that take up the entire frame?
Yes it does.
So I think just to if display frames make a bit wider because just because you can very easily change
it now because it's nested inside of all these frames.
So the size is commonly free.
Saying about about three five looks a little bit better I think.
Um, and maybe even putting it down a little bit as well.
Um.
So like one, two or something?
Something like that.
Think looks a little bit better, but yeah.
Okay.
Um, so inside of this frame we're going to add in a text label, which will be the label which will
basically contain, um, however fast we're running basically.
So this will be one, um.
Position is here, but I'm going to want it slightly more.
Um, outside of this bit.
So if we turn text scale on, this will be a good idea about the sizing of this.
Is that this be like 100.
So this is kind of what it would look like.
So we need to kind of control what because we always want the text scaled property here to be on.
Because otherwise your text will look different for different devices.
You don't really want that.
Um, so I'm thinking in text color of white, perhaps to fit with the color.
Um, that looks good.
Um, and then.
Making it a little bit smaller.
Positioning it in the center.
There we go.
I'm quite happy with that.
There.
I think it doesn't look too bad at all.
Um, the corners, maybe just, uh, I think is just laying on top is, um.
15.
15 almost looks a bit better, I think.
And then to change the, um, uh.
Then you need the black even.
Yeah, but for that bonus looks a bit better.
And then the this here, which needs to be a bit, a little bit larger of a frame itself.
So the position here to change to be to five.
Perhaps.
Yeah.
And then the size here to be seven.
Five.
Even like that?
Yeah.
Cool.
Now we're going to copy both of these out for the level and put that into here.
The only difference is obviously this is going to be um, well for um, a level.
So um, here we have two, we have the frame and we have the um, level here that the player is on.
So for the level bits, we just want a corner and a text label displaying what level that they are on.
So the text label.
Indigenous.
8080.
Thank you.
Very good habit to get into adding these objects inside of frames rather than just themselves.
It just gives you a bit more control over it.
I've got 0.5.
That's 50.50 and set this back to zero.
Uh, I'm using the Fukuoka one font.
It's a good idea to keep the same font.
Um.
For your game.
So it has its own kind of theme, really, and like text of one, for example.
That is quite nice there, maybe a little bit larger even.
Um.
0.9.
Zero.
Yeah.
Okay.
Cool.
And give it a different color.
Maybe as well.
So like the actual level here.
Giving it like a.
I mean, it's one maybe.
What could we do?
Yeah, something like that.
It looks quite nice.
Um, then for the frame itself here, we need to do it as a bar instead of as a number.
So the frame itself.
So we want to get rid of the text label.
And we're going to add into here a, um.
Frame.
So we're going to add in here a bar frame.
Now this will just be the area of that frame that the bar is contained inside of.
As you want to make sure that the even the smallest bit of the bar is visible.
So we might need to just make some small adjustments to this before, um.
You see, it goes in a bit more than it should do.
That's based on the design, which is fine, but just by setting up a setting.
Setting this up really?
Um, 91.
Um, position it to be.
Point one.
That's a bit more there, and we'll be able to see in a minute if this works properly.
But.
Point nine.
They're cool.
Um.
Bendlets are there no actual actual bar?
So basically B is a frame.
And at the moment we'll just happens to be 1010.
But we're doing all the kind of set up for that in a minute.
And again, this can just be the, um, where is it this color here, but just a bit darker.
Okay.
And this will obviously contain here a corner.
To match everything else of 15.
Yeah.
And you can just see here that the bar frame did need to be changed a bit there.
Um, to be perhaps 0.5.
Zero.
0.180.01.
There.
0.01.
So to.
One is just a zero.
Really would be fine for this one.
But yeah, so that's kind of what we'd be looking at for these.
I think adding a little bit of a space between them might look a bit better.
So we can get both of these and just set the, um, sizing here to be like 4 or 5 maybe, or like four
eight.
Just give it a little bit of a gap.
And the position here.
52.
Okay.
Quite a bit organizing and stuff there.
If you want, if you follow along with that or if you kind of just made your own one, as long as it's
following a different kind of a a, the same layout of how I've laid all mine out, um, through here.
Otherwise it will be slightly different when you are coding yours.
Okay, let's have a look at the shop then.
So this will be a another screen to add in here.
Um, calling this just our shop guy.
Okay.
Um, this will contain our, um, shop local script, which we'll touch on in the coming lectures.
Shop system.
Okay, cool.
Um.
So this will contain a button and our main kind of shop frame.
Let's add in our button first.
This will be a text button.
I'm going to call this shop button.
This will be allowing us to control whether we close.
I didn't corner.
Like that.
Um, give this a nice, um, the same color.
It's nice to keep the same colors.
Um, having a having a few colors that you use of different if you're having a lot, if you're having
a lot of different shades of colors and stuff, it can look a bit, um, a bit rough.
So by keeping the same colors, it keeps the kind of same theme of your game.
Really.
Um.
Let's keep the text just to be sharp.
Tech scaled.
Uh, for Dark One.
And let's give this maybe a white color like that, but okay, let's position this nicely.
So let's anchor it along YX1.
For a little bit smaller than that 0.15.
Mean, looks good.
And I'm going to just put this over here somewhere.
So position this along the Y.
Yep.
0.5.
Yep.
Quite happy with that.
Cool.
Now we want our actual shop.
So let's add in a frame here and just call this shop frame.
Okay.
Um, this will just be in the middle of our screen.
So 0.5 0.5, 0.5.
Point five changing the sizing of this.
Let's see what this might look like.
So 0.50 um, six I think six perhaps.
And then 0.50.
I think 66 looks quite good there.
Just like that.
I'm not carving entire screen, but just the portion of it.
Um, let's give it the same color as well to keep, uh, keep the consistency.
The shop frame and added a nice corner there as well.
At 15.
So just by keeping all the same consistency and stuff, it can look much, much nicer, which is a really
good idea to add in.
Okay, so inside this shop frame we want a couple of things.
I first want to add like a top bar to show that it's up here, which will show it as an item shop.
Um, so let's put that in first.
So add in a frame, call this um the top bar.
Sizing of this well along all of the axis there, and maybe about 0.1.
And.
0.15.
That boy looks the best there.
Um, we need the same corner here as 15.
Otherwise, it looks like that.
Um.
Oh, sorry.
Like that.
You don't want it to look like that at 15.
So it curves quite nicely.
And you can see the curve here.
So it's also good just duplicating this and adding a little bit down here, which we will do in a minute
just so that it evens up a bit more.
Um so in this and we're going to add in a text label.
This can probably cover the entire site.
I'm not too sure.
Probably best .5.5.
Tech orders B item shop again with the same font and the same color.
Um.
I want to keep the same color as that for this here.
So we're going to go to stats.
The, um.
Frame here.
That's the color I'm using for this.
It is the small details like that which will really make him look a bit better.
Item shop happier.
That's, um.
Where's the obvious text label?
Needs to have a.
Transparent background with a case of needs to have the color.
There we go.
Cool.
And let's add in our.
Oh yeah, let's add in our, um, just little background onto that.
So top bar.
Background.
Oh, capital letters there.
Top back on and just dip this down a little bit.
Zero five position here, or 0.10.1 along the Y.
As long as we put this here to have a small z index, it will appear under.
Let's like that there.
So we've got a nice border of it there.
The the item shop.
Okay, cool.
Um, from here, we'll need some frames for all of our items and stuff to go on to.
Um, so, um, this probably would be quite a long lecture, though.
So what I'm going to do is we're going to leave it there, and we're going to just set up the rest of
our labels and stuff next lesson.
I think it'll be a good, good idea as well, because I'll always be talking about kind of what, what
what's involved and what we need to be displaying and things like that.
So a lot of guys sort out today we're going to continue on with next lecture and then also start, um,
doing all the setup that we need before we start coding the item shop.